<div class="container" style="background-color:eee; height:200px;display: flex; align-items: center;justify-content: space-between;box-sizing: border-box;">
    <!-- justify-content: space-between;  /* 均匀排列每个元素
                                   首个元素放置于起点，末尾元素放置于终点 */ -->
    <!-- 在 display：flex中align-items居中可以当作指子元素垂直居中 -->
    <!-- box-sizing: border-box为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 -->
    <div  class="context" style="background-color:red; height:100px; width:100px;padding:0px 20px;">
        <!-- 子节点宽度几乎不生效 ，高度可起作用-->
        <!-- padding:**px **px; 指先上下，后左右 -->
        段泽民
    </div>
</div>